<template>
  <div :class="{ 'rule-filter-list-mobile': showMobilePage }" class="rule-filter-list">
    <div v-for="(item, index) in filterList" :key="index" :class="{ 'filter-item-mobile': showMobilePage }" class="filter-item">
      <!-- 且或条件 -->
      <el-select v-if="index !== 0" v-model="item.logic" size="small" class="rule-form-item rule-logic" @change="getData">
        <el-option
          v-for="item in logicOption"
          :key="item.id"
          :label="item.name"
          :value="item.name"/>
      </el-select>
      <!-- 条件一 -->
      <el-select v-model="item.conditions.key" size="small" class="rule-form-item rule-conditions-key" @change="getData" @visible-change="changeKey">
        <el-option
          v-for="item in keyOption"
          :key="item.id"
          :label="item.name"
          :value="item.name"
          :disabled="item.disabled"/>
      </el-select>
      <!-- 粉丝量级条件 -->
      <el-select v-if="item.conditions.key === '粉丝量级'" v-model="item.conditions.unit" size="small" class="rule-form-item rule-conditions-unit" @change="getUnit">
        <el-option
          v-for="item in unitOption"
          :key="item.id"
          :label="item.name"
          :value="item.name"/>
      </el-select>
      <el-input v-if="item.conditions.key === '粉丝量级'" v-model.number="item.conditions.value" type="number" size="small" placeholder="请输入粉丝数" class="rule-form-item rule-conditions-fans" oninput="if(value.length > 9)value=value.substring(0, value.length - 1);" @change="getData" />
      <!-- 下单形式 -->
      <el-cascader
        v-if="item.conditions.key === '下单形式'"
        v-model="item.conditions.value"
        :options="platformOption"
        :props="props"
        placeholder="搜索字段"
        class="rule-form-item filterableSelect"
        size="small"
        filterable
        clearable
        collapse-tags
        @change="getData" />
      <!-- 微任务 -->
      <el-select v-if="item.conditions.key === '微任务'" v-model="item.conditions.value" size="small" class="rule-form-item rule-conditions-value" @change="getData">
        <el-option
          v-for="item in miniTaskOption"
          :key="item.id"
          :label="item.name"
          :value="item.name"/>
      </el-select>
      <!-- 订单来源 -->
      <el-select v-if="item.conditions.key === '订单来源'" v-model="item.conditions.value" size="small" class="rule-form-item rule-conditions-value" @change="getData">
        <el-option
          v-for="item in sourceOption"
          :key="item.id"
          :label="item.name"
          :value="item.name"/>
      </el-select>
      <div v-if="!showMobilePage && index === 0 && filterList.length < 4" class="add-btn" @click="addItem">
        <img :src="addIcon" alt="">
      </div>
      <div v-else :class="{ 'delete-btn-mobile': showMobilePage }" class="delete-btn" @click="deleteItem(index)">
        <i class="delete-icon el-icon-delete"/>
      </div>
    </div>
    <span v-if="showMobilePage && filterList.length < 4" class="create-btn-mobile" @click="addItem">
      添加<span class="add-icon">+</span>
    </span>
  </div>
</template>
<script>
import { rulePlatform } from '@/api/supplier';
import addIcon from '@/assets/reportManage/add_icon.png';
import { mapState } from 'vuex';
export default {
  props: {
    closeDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      addIcon,
      filterList: [
        {
          logic: 'or', // or,and
          conditions: {
            key: '', // 条件一
            value: '', // 条件二
            unit: '' // 操作，=,>,<,>=,<=
          }
        }
      ],
      logicOption: [{
        id: 1,
        name: 'or'
      }, {
        id: 2,
        name: 'and'
      }],
      keyOption: [{
        id: 1,
        name: '粉丝量级',
        disabled: false
      }, {
        id: 2,
        name: '下单形式',
        disabled: false
      }, {
        id: 3,
        name: '微任务',
        disabled: false
      }, {
        id: 4,
        name: '订单来源',
        disabled: false
      }],
      unitOption: [{
        id: 1,
        name: '<'
      }, {
        id: 2,
        name: '≤'
      }, {
        id: 3,
        name: '='
      }, {
        id: 4,
        name: '≥'
      }, {
        id: 5,
        name: '>'
      }],
      platformOption: [],
      props: {
        value: 'id',
        label: 'name',
        children: 'item',
        checkStrictly: true,
        multiple: true
      },
      miniTaskOption: [
        {
          id: 0,
          name: '未挂靠'
        },
        {
          id: 1,
          name: '挂靠'
        }
      ],
      sourceOption: [
        {
          id: 0,
          name: '飞博招商'
        },
        {
          id: 1,
          name: '达人个人引进'
        }
      ]
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  watch: {
    closeDialog(newV, oldV) {
      this.filterList = [{
        logic: 'or', // or,and
        conditions: {
          key: '', // 条件一
          value: '', // 条件二
          unit: '' // 操作，=,>,<,>=,<=
        }
      }];
    }
  },
  created() {
    this.getPlatform();
  },
  methods: {
    initData(value) {
      switch (value) {
        case '微任务':
          this.changeData(value, '未挂靠', '=');
          break;
        case '订单来源':
          this.changeData(value, '飞博招商', '=');
          break;
        case '下单形式':
          this.changeData(value, null, '=');
          break;
        case '粉丝量级':
          this.changeData(value, null, '');
          break;
      }
    },
    changeData(value, text, unit) { // 初始化展示数据
      this.filterList.map(item => {
        if (value === item.conditions.key) {
          item.conditions.value = text;
          item.conditions.unit = unit;
        }
        return item;
      });
    },
    getPlatform() {
      rulePlatform().then(res => {
        this.platformOption = res.data;
      });
    },
    changeKey(val) {
      if (val) {
        // 选择下拉框 已选中的数据不可再点击
        this.keyOption.map(item => {
          const isSelect = this.filterList.findIndex(val => val.conditions.key === item.name);
          if (isSelect !== -1) {
            item.disabled = true;
          } else {
            item.disabled = false;
          }
          return item;
        });
      }
    },
    getData(value) {
      this.initData(value);
      this.$emit('filterGroup', this.filterList);
    },
    getUnit() {
      this.$emit('filterGroup', this.filterList);
    },
    addItem() {
      const initData = {
        logic: 'or', // or,and
        conditions: {
          key: '', // 条件一
          value: '', // 条件二
          unit: '' // 操作，=,>,<,>=,<=
        }
      };
      this.filterList.push(initData);
      // 选择下拉框 已选中的数据不可再点击
      this.keyOption.map(item => {
        const isSelect = this.filterList.findIndex(val => val.conditions.key === item.name);
        if (isSelect !== -1) {
          item.disabled = true;
        } else {
          item.disabled = false;
        }
        return item;
      });
    },
    deleteItem(index) {
      this.filterList.splice(index, 1);
      this.$emit('filterGroup', this.filterList);
    }
  }
};
</script>
<style lang="scss" scoped>
.rule-filter-list {
  .filter-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    &:last-child {
      margin-bottom: 0;
    }
    .rule-form-item {
      margin-right: 16px;
      width: 100px;
      &:last-child {
        margin-right: 0;
      }
    }
    .rule-logic {
      width: 80px;
    }
    .rule-conditions-fans {
      width: 120px;
    }
    .filterableSelect {
      width: 110px;
      &::v-deep {
        .el-tag {
          color: #666;
        }
      }
    }
    .add-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      cursor: pointer;
      border-radius:4px;
      background-color: #EFF3FB;
      img {
        width: 16px;
        height: 16px;
      }
    }
    .delete-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      cursor: pointer;
      .delete-icon {
        font-size: 16px;
        color: #6C6C6C;
      }
    }
    &.filter-item-mobile {
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        margin-bottom: 0;
        .delete-btn-mobile {
          position: absolute;
          top: 0;
          right: -16px;
        }
      .rule-form-item {
        margin-bottom: 16px;
      }
    }
  }
  &.rule-filter-list-mobile {
    .create-btn-mobile {
      display: flex;
      align-items: center;
      color: #406EFF;
      font-weight: bold;
      .add-icon {
        color: #406EFF;
        font-size: 18px;
        margin:0 0 2px 4px;
      }
    }
  }
}
</style>
